<template>
    <div class="container">
        <div class="tabCommonTitle">
            <span>知识产权及其他附件</span>
        </div>
        <IntellectualPropertyRight :is_modify="is_modify" />
        <p class="list_title">
            <span class="list_name">其他证明</span>
            <a-button class="shangchuan pointer" :class="is_modify=='Y'?'':'disabled'" @click="upload_qtfj" :disabled="is_modify=='Y'?false:true">添加</a-button>
        </p>
        <div class="tableList">
            <table style="text-align:center;" width="1110"  align="center" cellpadding="">
                <thead>
                    <tr>
                        <th>序号</th>
                        <th>附件名称</th>
                        <th>上传状态</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody v-if="qtfjlist.length">
                    <tr v-for="(item, index) in qtfjlist" :key="index">
                        <td>{{index+1}}</td>
                        <td>{{item.fjWjMc}}</td>
                        <td>{{item.filePath!='' ?'成功':''}}</td>
                        <td>
                            <a>
                                <img style="width:18px;height:18px;margin-right:22px;" @click="preview_qtfj(item.filePath)" src="@/assets/img/yulan.png" alt="">
                                <img v-if="is_modify=='Y'?true:false" style="width:18px;height:18px;margin-right:11px;"  @click="edit_qtfj(item.id)" src="@/assets/img/bianji.png" alt="">
                                <img v-if="is_modify=='Y'?true:false" style="width:18px;height:18px;margin-left:11px;" @click="del_qtfj(item.id)" src="@/assets/img/shanchu1.png" alt="">
                            </a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <a-modal
            v-drag-modal
			title="其他证明"
            class="enclosure_modal"
			:visible="visible"
            :maskClosable="false"
            :width="700"
            @cancel="handleCancel"
		>
            <template slot="footer">
                <a-button @click="handleCancel">取消</a-button>
                <a-button key="submit" type="primary" :disabled="disabled_add" @click="handleSubmit">保存</a-button>
            </template>
            <a-form-model ref="ruleForm" :model="form_add" :rules="rules_add" >
				<a-form-model-item ref="fujianname" prop="fujianname" label="附件名称" :label-col="{ span: 4 }" :wrapper-col="{ span: 18 }">
					<a-input v-model="form_add.fujianname" placeholder="附件名称"  @blur="() => {$refs.fujianname.onFieldBlur();}"/>
				</a-form-model-item>
				<a-form-model-item ref="fujianfile" prop="fujianfile" label="上传文件（50M以内，pdf格式）：" :label-col="{ span:12 }" :wrapper-col="{ span: 8}">
                    <a-upload
                        action="#"
                        accept='.pdf'
                        :file-list="fileList"
                        :show-upload-list="showUploadList"
                        :before-upload="beforeUpload"
                    >
                        <a-button style="width: 120px;height: 40px;line-height: 40px;margin:0;background:#fff;color:#333;"><a-icon type="upload" />上传</a-button>
                    </a-upload>
                </a-form-model-item>
			</a-form-model>
		</a-modal>
        <a-modal
            v-drag-modal
			title="其他证明"
            class="enclosure_modal"
			:visible="visible_edit"
            :maskClosable="false"
            :width="700"
            @cancel="handleCancel_edit"
		>
            <template slot="footer">
                <a-button @click="handleCancel_edit">取消</a-button>
                <a-button key="submit" type="primary" :disabled="disabled_edit" @click="handleSubmit_edit">保存</a-button>
            </template>
			<a-form-model ref="ruleForm_edit" :model="form_add" :rules="rules_edit" >
				<a-form-model-item ref="fujianname" prop="fujianname" label="附件名称" :label-col="{ span: 4 }" :wrapper-col="{ span: 18 }">
					<a-input v-model="form_add.fujianname" placeholder="附件名称"  @blur="() => {$refs.fujianname.onFieldBlur();}"/>
				</a-form-model-item>
				<a-form-model-item ref="fujianfile" prop="fujianfile" label="上传文件（50M以内，pdf格式）：" :label-col="{ span:12 }" :wrapper-col="{ span: 8 }">
                    <a-upload
                        action="#"
                        accept='.pdf'
                        :file-list="fileList"
                        :show-upload-list="showUploadList"
                        :before-upload="beforeUpload"
                    >
                        <a-button style="width: 120px;height: 40px;line-height: 40px;margin:0;background:#fff;color:#333;"><a-icon type="upload" />重新上传</a-button>
                    </a-upload>
            	</a-form-model-item>
                <a-form-model-item label="已上传文件： " :label-col="{ span:5 }" :wrapper-col="{ span: 17 }">
					<a-input v-model="form_add.fujianrename" disabled />
				</a-form-model-item>
			</a-form-model>
		</a-modal>
        <testPdf :cxj_cxj_id="cxj_cxj_id" :file-path="filePath" :showPdf="showpdf"></testPdf>
    </div>
</template>

<script>
import {
    cxjsb_getQtfj,
    cxjsb_qtfjAdd,
    cxjsb_qtfjList,
    cxjsb_qtfjDelete,
} from '@/api/shenbao';
import testPdf from '@/views/declarationSystem/declare/testPdf';
import IntellectualPropertyRight from './enclosure/IntellectualPropertyRight.vue'
import { mapActions } from 'vuex'
export default {
    name: 'Enclosure',
    props: ['is_modify'],
    components: {
        testPdf,
        IntellectualPropertyRight
    },
    data() {
        return {
            visible: false,
            visible_edit: false,
            confirmLoading: false,
            cxj_cxj_id: '',
            form: {},
            rules_add: {},
            form_add: {},
            rules_edit: {},
            files: '',
            qtfjlist: [],
            fileList: [],
            showUploadList: {
                showDownloadIcon: false,
                showRemoveIcon: false,
            },
            disabled_add: false,
            disabled_edit: false,
            leibiearr: [{
                value: "发明专利"
            },{
                value: "实用新型专利"
            },{
                value: "软件著作权"
            }],
            showpdf: false,
            filePath: '',
        }
    },
    props: ['is_modify'],
    methods: {
        ...mapActions('fillingSteps', ['getStatus']),
        handleCancel() {
            this.visible = false;
            this.disabled_add = false;
            this.files = '';
            this.resetForm();
        },
        handleCancel_edit() {
            this.visible_edit = false;
            this.disabled_edit = false;
            this.files = '';
            this.resetForm_edit();
        },
        startChange(date, dateString){
            console.log(date, dateString)
            this.form_add.fujiantime = dateString;
        },
        upload_qtfj() {
            this.edit_id = '';
            this.form_add = {
                fujianname: '',
                fujianfile: ''
            };
            this.rules_add = {
                fujianname: [
                    { required: true, message: '请填写附件名称',trigger: 'blur' }
                ],
                fujianfile: [{ required: true, message: '请上传文件',trigger: 'change' }],
            },
            this.visible = true;
            this.files = '';
        },
        preview_qtfj(filePath) {
            this.showpdf = !this.showpdf;
            this.filePath = filePath;
        },
        edit_qtfj(id) {
            this.edit_id = id;
            this.visible_edit = true;
            this.form_add = {
                fujianname: '',
                fujianfile: '',
                fujianrename: '',
            };
            this.rules_add = {
                fujianname: [
                    { required: true, message: '请填写附件名称',trigger: 'blur' }
                ],
                fujianfile: [],
            },
            this.files = '';
            let that = this;
            cxjsb_getQtfj({cxj_cxj_id:that.cxj_cxj_id,id}).then(res=>{
                if (res.data.code=='200') {
                    let data = res.data.result;
                    this.form_add.fujianname = data.fjWjMc;
                    this.form_add.fujianrename = data.fileRename;
                }
            })
        },
        del_qtfj(id) {
            let that = this;
            this.$confirm({
                content: '确定要删除该项吗？',
                onOk() {
                    cxjsb_qtfjDelete({
                        cxj_cxj_id: that.cxj_cxj_id,
                        id: id
                    }).then(res=>{
                        let data = res.data;
                        if (data.success) {
                            that.$message.success('删除成功');
                            that.get_cxjsb_qtfjList();
                        } else {
                            that.$message.error(data.message);
                        }
                    })
                },
                cancelText: '取消',
                onCancel() {
                    that.destroyAll();
                },
            });
        },
        resetForm() {
            this.edit_id = '';
            this.$nextTick(()=>{
                this.$refs.ruleForm.resetFields();
                this.fileList = [];
            })
        },
        resetForm_edit() {
            this.edit_id = '';
            this.$nextTick(()=>{
                this.$refs.ruleForm_edit.resetFields();
                this.fileList = [];
            })
        },
        onchangetime(date, dateString) {
            this.form_add.fujiantime = dateString;
        },
        beforeUpload(file) {
            if (file) {

                if (file.size > 50*1024*1024) { // 此处判断上传文件的大小 , 单位为 b 故要乘以两个1024
                    this.$message.warning('文件最大为50兆')
                    return
                } else if (file.type!='application/pdf') { // 此处判断上传文件的格式
                    this.$message.warning('请上传pdf格式的文件')
                    return
                } else {
                    this.files = file;
                    this.form_add.fujianfile = file;
                    this.fileList = [file];
                }
            }
            return false;
        },
        handleUpload(e) {
            const files = e.target.files[0];
            if (files) {
                this.files = files;
            }
        },
        handleSubmit() {
            let that = this;
            this.$refs.ruleForm.validate(valid => {
                if (valid) {
                    this.disabled_add = true;
                    let formData = new FormData();
                    formData.append('cxj_cxj_id', that.cxj_cxj_id);
                    formData.append('file', this.files);
                    formData.append('id', '');
                    that.getData(formData);
                } else {
                    return false;
                }
            });
        },
        handleSubmit_edit() {
            let that = this;
            this.$refs.ruleForm_edit.validate(valid => {
                if (valid) {
                    this.disabled_edit = true;
                    let formData = new FormData();
                    formData.append('cxj_cxj_id', that.cxj_cxj_id);
                    if (this.files) {
                        formData.append('file', this.files);
                    }
                    formData.append('id', this.edit_id);
                    that.getData(formData);
                } else {
                    return false;
                }
            });
        },
        getData(formData) {
            let that = this;
            formData.append('fjWjMc', that.form_add.fujianname);
            cxjsb_qtfjAdd(formData).then(res=>{
                if (this.edit_id) {
                    this.handleCancel_edit();
                } else {
                    this.handleCancel();
                }
                if (res.data.code=='200') {
                    that.getStatus(that.cxj_cxj_id)
                    that.$message.success('保存成功');
                    that.get_cxjsb_qtfjList();
                } else {
                    that.$message.error(res.data.message);
                }
            }).catch(err=>{
                this.disabled_add = false;
                this.disabled_edit = false;
            })
        },
        destroyAll() {
            this.$destroyAll();
        },
        get_cxjsb_qtfjList() {
            let that = this;
            cxjsb_qtfjList({cxj_cxj_id: that.cxj_cxj_id}).then(res=>{
                if (res.data.code=='200') {
                    that.qtfjlist = res.data.result;
                }
            })
        },
        init() {
            this.get_cxjsb_qtfjList();
        },
    },
    mounted() {
        this.cxj_cxj_id = this.$route.query.cxj_cxj_id;
        this.init();
    }
}
</script>

<style lang="less" scoped>
.list_title {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px;
    margin-bottom: 25px;
    .list_name {
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #3388EE;
    }
}
.shangchuan {
    width: 70px;
    height: 32px;
    line-height: 32px;
    color:#fff;
    text-align: center;
    border: 1px solid #3388EE;
    background: #3388EE;
    margin-left: 10px;
    border-radius: 4px;
    display: inline-block;
}
.tableList {
    // padding-bottom: 30px;
    table {
        margin-top: 20px;
        background: #FFFFFF;
        thead {
            background: #F5F5F5;
            tr {
                th {
                    height: 60px;
                    font-size: 16px;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: 500;
                    color: #333333;
                }
            }
        }
        tbody {
            tr {
                height: 52px;
                border-bottom: 1px solid #E8E8E8;
                td {
                    color: #444444;
                    font-size: 14px;
                    font-weight: 400;
                    height: 52px;
                }
            }
        }
    }
}
</style>